import React, { Component } from "react";
import { Carousel } from "antd-mobile";
import styles from "./Home.module.scss";
import img1 from "../../components/images/1.png";
import img2 from "../../components/images/2.png";
import img3 from "../../components/images/3.png";
import img4 from "../../components/images/4.png";
import img5 from "../../components/images/5.png";
class Home extends Component {
  state = {
    data: [
      "https://open-cdn.zhongan.com/dm-instrument/images/12oof9xuswixuj1y1t7tro6vbhjhulbttxphn8nm.banner.png",
      "https://open-cdn.zhongan.com/dm-instrument/images/pc0y1gv7zgo1sbe1kqm6muezclne14qhhymjq7tt.jpg",
      "https://open-cdn.zhongan.com/dm-instrument/images/8vqyn476zlnhdm2kjss4ojtyvubktwiuw3mzhksg.jpg",
    ],
    imgHeight: 176,
  };
  render() {
    return (
      <div>
        <div className={styles.zaHeader}>
          <span className={styles.b}>众安保险</span>
        </div>
        <Carousel
          autoplay={true}
          infinite
          beforeChange={(from, to) =>
            console.log(`slide from ${from} to ${to}`)
          }
          afterChange={(index) => console.log("slide to", index)}
        >
          {this.state.data.map((val) => (
            <a
              key={val}
              href="http://www.alipay.com"
              style={{
                display: "inline-block",
                width: "100%",
                height: this.state.imgHeight,
              }}
            >
              <img
                src={val}
                alt=""
                style={{ width: "100%", verticalAlign: "top" }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event("resize"));
                  this.setState({ imgHeight: "auto" });
                }}
              />
            </a>
          ))}
        </Carousel>
        <div className={styles.imgNav}>
          <div className={styles.imgNavItem}>
            <a href="#/goodlist">
              <img
                src="https://open-cdn.zhongan.com/dm-instrument/images/ggcoharenuhwspoyxjyrnkdz2l937opbkqj2wohi.png"
                alt=""
              />
            </a>
            <div className={styles.text}>健康</div>
          </div>
          <div className={styles.imgNavItem}>
            <a href="#/goodlist">
              <img
                src="https://open-cdn.zhongan.com/dm-instrument/images/jtzzc7swuzd9gu8iyu2jy2z8dkkqfdp3ntqfcoip.png"
                alt=""
              />
            </a>
            <div className={styles.text}>意外</div>
          </div>
          <div className={styles.imgNavItem}>
            <a href="#/goodlist">
              <img
                src="https://open-cdn.zhongan.com/dm-instrument/images/gvrer8yoom9ifyrcbypcxvg8zzwwr0yuousj5fls.png"
                alt=""
              />
            </a>
            <div className={styles.text}>车险</div>
          </div>
          <div className={styles.imgNavItem}>
            <a href="#/goodlist">
              <img
                src="https://open-cdn.zhongan.com/dm-instrument/images/79ptflhz5qk7tkfhhqvbsczkfis1tp5aykwaz3az.png"
                alt=""
              />
            </a>
            <div className={styles.text}>旅游</div>
          </div>
          <div className={styles.imgNavItem}>
            <a href="#/goodlist">
              <img
                src="https://open-cdn.zhongan.com/dm-instrument/images/nph6pl4r4ru6wmqrtak4tikqe6mrumwjtwjwiqtl.png"
                alt=""
              />
            </a>
            <div className={styles.text}>更多</div>
          </div>
        </div>
        <div className={styles.listNav}>
          <div className={styles.listNavItem}>
            <h3>保单</h3>
            <p>一键看保单</p>
            <img
              className={styles.listNavItemImg}
              src="https://open-cdn.zhongan.com/dm-instrument/images/jx1rxttbejhzve6kuhax2h4s0crjq4oewgsse1ui.png"
              alt=""
            ></img>
          </div>
          <div className={styles.listNavItem}>
            <h3>众安优选</h3>
            <p>性价比推荐</p>
            <img
              className={styles.listNavItemImg}
              src="https://open-cdn.zhongan.com/dm-instrument/images/lvsqt1xtkcld98zwyhufjcyaeizul555l2y3gumf.png"
              alt=""
            ></img>
          </div>
          <div className={styles.listNavItem}>
            <h3>马上金</h3>
            <p>5万承保额</p>
            <img
              className={styles.listNavItemImg}
              src="https://open-cdn.zhongan.com/dm-instrument/images/k1zqmwuyyetdzwfkqdj57vbimbhfwijmezxdi2mz.png"
              alt=""
            ></img>
          </div>
          <div className={styles.listNavItem}>
            <h3>在线客服</h3>
            <p>一键咨询</p>
            <img
              className={styles.listNavItemImg}
              src="https://open-cdn.zhongan.com/dm-instrument/images/pq28syyio4bdqt1cpds0g1tu3bvoybq5y17oxaie.%E5%AE%A2%E6%9C%8D.png"
              alt=""
            ></img>
          </div>
        </div>
        <img src="./img/home1.png" alt="" style={{ width: "100%" }} />
        <img src="./img/home2.png" alt="" style={{ width: "100%" }} />
        <img src="./img/home3.png" alt="" style={{ width: "100%" }} />
        {/* <div className={styles.titleCommon}>
          <h3 className={styles.tuijian}>为你推荐</h3>
        </div>
        <div className={styles.introduce}>
          <div className={styles.introduceItem}>
            <img src="https://open-cdn.zhongan.com/dm-instrument/images/pb9jugx0pgpfxivwpvtlfpfuhtlytbgb2byab48g.%E4%B8%BA%E4%BD%A0%E6%8E%A8%E8%8D%90-%E4%BC%97%E5%AE%89%E7%99%BE%E4%B8%87%E5%8C%BB%E7%96%97.png"></img>
            <div>
              <h4> 众安百万医疗保险</h4>
              <p>高达600万保额，疾病和意外住院都能赔</p>
            </div>
          </div>
          <div className={styles.introduceItem}>
            <img src="https://open-cdn.zhongan.com/dm-instrument/images/33hf3v2p6xz0lezzvy9xlutvpxr3pfk3bm0eknvv.png"></img>
            <div>
              <h4> 众安百万医疗保险</h4>
              <p>高达600万保额，疾病和意外住院都能赔</p>
            </div>
          </div>
          <div className={styles.introduceItem}>
            <img src="https://open-cdn.zhongan.com/dm-instrument/images/k045uublwbl5ntg4ap41miru1ipmmudahskujrr8.png"></img>
            <div>
              <h4> 众安百万医疗保险</h4>
              <p>高达600万保额，疾病和意外住院都能赔</p>
            </div>
          </div>
        </div>
        <div className={styles.titleCommon}>
          <h3>健康</h3>
          <span>守护全局</span>

          <a href="">更多 》</a>
        </div>
        <div className={styles.jietu}>
          <img src={img1} alt="" />
        </div>
        <div className={styles.titleCommon}>
          <h3>家庭综合</h3>
          <span>保房保家</span>

          <a href="">更多 》</a>
        </div>
        <div className={styles.jietu2}>
          <img src={img2} alt="" />
        </div>
        <div className={styles.titleCommon}>
          <h3>汽车</h3>
          <span>轻松用车</span>
          <a href="">更多 》</a>
        </div>
        <div className={styles.jietu3}>
          <img src={img3} alt="" />
        </div>
        <div className={styles.titleCommon}>
          <h3>亲子</h3>
          <span>幸福成长</span>
          <a href="">更多 》</a>
        </div>
        <div className={styles.jietu4}>
          <img src={img4} alt="" />
        </div>
        <div className={styles.titleCommon}>
          <h3>数码</h3>
          <span>爱机无忧</span>
          <a href="">更多 》</a>
        </div>
        <div className={styles.jietu5}>
          <img src={img5} alt="" />
        </div>
        <div className={styles.logo}> */}
          {/* <img
            src="https://m.zhongan.com/home/assets/images/home/copy.png"
            alt=""
          />
        </div> */}
      </div>
    );
  }
}

export default Home;
